<template>
	<view style="background-color:#f0f8ff">
		<!-- 顶部 -->
		 <view class="top" :style="{ height: topHeight + 'px' }">
			<view class="top-item" @click="returns">
				<image src="/static/ret.png" alt="" />
				<text>我的就诊人</text>
			</view>
		</view>

		<!-- 就诊人卡片 -->
		<view id="container">
			<view v-for="(item, index) in peoples" :key="index" class="peoples" @click="message(item)">
				<view class="people-one">
					<view class="one-name">{{ item.nickname }}</view>
					<view class="relationship">（{{ item.relationship }}）</view>
				</view>
				<view class="codes">
					<view class="code-name">身份证号</view>
					<view class="code-num">：{{ item.code }}</view>
					<image src="" alt="" />
				</view>
				<view class="cards">
					<view class="card-name">就诊卡号</view>
					<view class="card-num">：{{ item.card }}</view>
				</view>
			</view>
		</view>

		<!-- 添加就诊人 -->
		<view class="add-person" @click="personAdd">
			<view class="imgs">
				<image src="/static/add.png" alt="添加" />
			</view>
			<view class="add-font">添加就诊人</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	const peoples = ref([]); // 存储就诊人数据

	// 返回上一页
	const returns = () => {
		uni.reLaunch({
			url: '/pages/home/home'
		})
	};
const topHeight = ref(0);  // 用于存储动态计算的top高度

  // 在组件挂载时获取设备信息
  onMounted(() => {
    const systemInfo = uni.getSystemInfoSync();
    const navBarHeight = systemInfo.statusBarHeight;  // 获取状态栏的高度
    topHeight.value = navBarHeight + 44;  // 导航栏高度加50px
    console.log('导航栏高度:', navBarHeight);
    console.log('动态计算的top高度:', topHeight.value);
  });
	// 跳转到添加就诊人页面
	const personAdd = () => {
		uni.reLaunch({
			url: '/pages/new/new'
		});
	};


	// 处理条目点击事件并跳转到详细信息页面
	const message = (item) => {
		uni.setStorageSync('selectedPerson', item); // 将选中的就诊人数据存储
		uni.reLaunch({
			url: `/pages/personDetail/personDetail?id=${item.id}&ids=${item.user_id}`
		});
	};

	const fetchPeoples = () => {
		const responseData = uni.getStorageSync('data'); // 获取存储的数据
		console.log(responseData);
		let dataObj = null;
		try {
			dataObj = JSON.parse(responseData); // 尝试将数据解析为对象
		} catch (e) {
			console.log('数据解析失败', e);
		}

		console.log('Fetched Data:', dataObj);

		if (!dataObj || !dataObj.data) {
			console.log('没有找到存储的数据或数据格式不正确');
			return;
		}

		let userId = dataObj.data.id || 156; // 如果 userId 为 undefined，则设为 156
		console.log('User ID:', userId);

		uni.request({
			url: 'https://yiliao.kuxia.top/app/Visit/index',
			method: 'POST',
			data: {
				user_id: userId
			},
			success: (result) => {
				console.log('Response Data:', result.data);

				if (result.data && Array.isArray(result.data.data) && result.data.data.length > 0) {
					peoples.value = result.data.data;
				} else {
					console.warn('返回的数据格式不正确');
				}
			},
			fail: (error) => {
				console.error('请求失败:', error);
			}
		});
	};



	// 页面加载时获取就诊人数据
	onMounted(() => {
		fetchPeoples();
		// 监听刷新事件
		uni.$on('refreshData', fetchPeoples);
	});
</script>

<style scoped>
	/* 顶部样式 */
 .top {
    background-color: #00daca;
    width: 100%;
    color: white;
    font-size: 21px;
    line-height: 3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left: 15px;
  }

  .top-item {
    display: flex;
    align-items: center;
    margin-top: 30px;
  }

  .top-item image {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }

  .top-item text {
    font-size: 20px;
  }
	/* 就诊人卡片样式 */
	.peoples {
		background-color: white;
		width: 94%;
		margin-left: 3%;
		height: 95px;
		margin-top: 10px;
		border-radius: 5px;
		padding: 10px;
	}

	.people-one {
		display: flex;
		color: #555555;
		font-size: 16px;
		font-weight: bold;
	}

	.relationship {
		margin-left: 5px;
		font-size: 14px;
		color: #888;
	}

	.codes,
	.cards {
		display: flex;
		font-size: 14px;
		color: #818181;
		margin-top: 5px;
	}

	.codes image {
		width: 17px;
		height: 17px;
		margin-left: auto;
	}

	/* 添加就诊人按钮样式 */
	.add-person {
		background-color: white;
		width: 94%;
		margin-left: 3%;
		height: 85px;
		margin-top: 20px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		left: 0px;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
	}

	.imgs {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.imgs image {
		width: 30px;
		height: 30px;
		display: block;
	}

	.add-font {
		color: #333;
		font-size: 16px;
		margin-top: 5px;
		font-weight: bold;
	}
</style>